<template>
  <div>
    <h1>任务列表</h1>
    <ul class="con">
      <li
        v-for="(item, index) in list"
        :key="item.id"
        v-show="
          $store.state.status === 'all'
            ? true
            : item.status === $store.state.status
        "
      >
        <!-- 如果是全部任务 就直接是all就不筛选  如果不是all 就根据状态筛选 -->
        <input class="left" type="checkbox" v-model="item.status" />
        <p>{{ item.title }}</p>
        <span class="right" @click="del(index)">x</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    del(i) {
      this.$store.commit("del", i);
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    list() {
      return this.$store.state.list;
    },
    //计算属性拿一下vuex里的数据
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.con {
  li {
    display: flex;
    height: 50px;
    align-items: center;
    position: relative;
    justify-content: center;
    .left {
      position: absolute;
      left: 5px;
    }
    .right {
      position: absolute;
      right: 5px;
    }
  }
}
</style>
